<template>
  <VanUploader
    :model-value="fileList"
    :upload-text="textTip"
    image-fit="contain"
    :preview-image="!isFile"
    :after-read="onAfterRead"
    :accept="isFile ? '*/*' : 'image/*'"
    @update:modelValue="onUpdate"
  >
    <template v-for="(value, slot) in slots" :key="slot" #[slot]>
      <slot :name="slot"></slot>
    </template>
  </VanUploader>
</template>

<script setup>
import { formatImageUrl } from "@/utils/imageUtils.js";
import { computed, useSlots } from "vue";
import { upload } from "@/api/commonApi.js";
const slots = useSlots();

const props = defineProps({
  modelValue: [String, Array],
  maxCount: {
    type: Number,
    default: 1,
  },
  isFile: Boolean,
  uploadText: String,
});
const emits = defineEmits(
  "update:modelValue",
  "update:fileName",
  "update:file"
);

const fileList = computed(() => {
  let list = [];

  if (!props.modelValue) {
    return list;
  }

  if (typeof props.modelValue === "string") {
    list.push({
      url: formatImageUrl(props.modelValue),
      value: props.modelValue,
    });
  } else if (Array.isArray(props.modelValue)) {
    list = props.modelValue.map((url) => {
      return {
        url: formatImageUrl(url),
        value: props.modelValue,
      };
    });
  }
  return list;
});
const fileNameMap = {};

const textTip = computed(() => {
  if (props.maxCount === 1 && fileList.value.length !== 0) {
    return "重新上传";
  } else {
    return props.uploadText;
  }
});

const onAfterRead = async ({ file }) => {
  let res = (await upload(file)) || {};
  let { fileName } = res;
  fileNameMap[fileName] = res;

  if (props.maxCount === 1) {
    emits("update:modelValue", fileName);
    emits("update:fileName", fileNameMap[fileName].originalFilename);
    emits("update:file", fileNameMap[fileName]);
  } else {
    let list = [];
    if (typeof props.modelValue === "string") {
      list.push(props.modelValue);
    } else if (Array.isArray(props.modelValue)) {
      list.push(...props.modelValue);
    }
    if (list.length < props.maxCount || !props.maxCount) {
      list.push(fileName);
    } else {
      list[list.length - 1] = fileName;
    }
    emits("update:modelValue", list);
    emits(
      "update:fileName",
      list.map((item) => fileNameMap[item].originalFilename)
    );
    emits(
      "update:file",
      list.map((item) => fileNameMap[item])
    );
  }
};

const onUpdate = (list) => {

  // 新增则不做更新
  if (list.find(item => item.file instanceof File)) {
    return false;
  }

  if (props.maxCount === 1) {
    const fileName = (list[0] || {}).value || "";
    emits("update:modelValue", fileName);
    emits("update:fileName", fileNameMap[fileName]?.originalFilename || "");
    emits("update:file", fileNameMap[fileName]);
  } else {
    const fileList = list.map((item) => item.value);
    emits("update:modelValue", fileList);
    emits(
      "update:fileName",
      fileList.map((item) => fileNameMap[item].originalFilename)
    );
    emits(
      "update:file",
      fileList.map((item) => fileNameMap[item])
    );
  }
};
</script>

<style lang="scss" scoped></style>
